<template>
  <div>
    <!-- 工序管理 -->
    <div class="topBtn">
      <div class="sizeBig"><span></span></div>
      <div>
        <el-button type="primary" style="height:36px;">
          <i class="icon-close"></i>禁用
        </el-button>
        <el-button type="primary" style="height:36px;">
          <i class="icon-qiy"></i>启用
        </el-button>
        <el-button type="primary" @click.native="add">
          <i class="iconfont icon-addNew"></i> 新增
        </el-button>
        <el-button type="primary" icon="el-icon-edit">修改</el-button>
        <el-button type="primary" icon="el-icon-delete">删除</el-button>
      </div>
    </div>
    <!-- 筛选 -->
    <div class="flex">
      <div class="flex">
        <el-input
          placeholder="请输入内容"
          style="width: 200px;margin-right: 20px"
          suffix-icon="el-icon-search"
          v-model="search"
        />
      </div>
      <div class="flex">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <!-- 数据表格 -->
    <!-- <AzureDynamicTable
      :columnDesObjs="columnDesObjs"
      :data="tableData"
      :showSeq="true"
      @selection-change="select"
    >
      <template slot="selection">
        <el-table-column
          align="center"
          fixed="left"
          type="selection"
          width="55"
        >
        </el-table-column>
      </template>
    </AzureDynamicTable> -->
    <div class="tablesize">
      <el-table
        :data="tableData"
        border
        @selection-change="handleSelectionChange"
        style="width: 100%"
        :header-cell-style="{ background: '#f4f4f4' }"
      >
        <el-table-column fixed type="selection" align="center" width="50">
        </el-table-column>
        <el-table-column
          type="index"
          :index="indexMethod"
          align="center"
          label="序号"
          width="50"
        >
        </el-table-column>
        <el-table-column
          prop="ProductDeviceId"
          align="center"
          :show-overflow-tooltip="true"
          label="制作设备"
        >
        </el-table-column>
        <el-table-column
          prop="ProductId"
          align="center"
          :show-overflow-tooltip="true"
          label="产品ID"
        >
        </el-table-column>
        <el-table-column
          prop="DeviceId"
          align="center"
          :show-overflow-tooltip="true"
          label="设备ID"
        >
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增弹出框 -->
    <!-- <el-dialog title="新增数据" :visible.sync="addDialogVisible" width="600px">
      <el-form
        :model="addForm"
        :rules="rules"
        ref="addForm"
        label-width="140px"
        class="demo-ruleForm"
      >
        <el-form-item label="工序名称：" prop="name">
          <el-input v-model="addForm.name" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="工序描述：" prop="description">
          <el-input
            v-model="addForm.description"
            style="width:350px"
          ></el-input>
        </el-form-item>
        <el-form-item label="建议工序：" prop="wokerOrder">
          <el-input v-model="addForm.wokerOrder" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="工序需要时间：" prop="needTime">
          <el-input v-model="addForm.needTime" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="工序类型ID：" prop="techTypeId">
          <el-select
            v-model="addForm.techTypeId"
            placeholder="请选择工序类型ID"
            style="width:350px"
          >
            <el-option
              v-for="item in typeList"
              :key="item.TechTypeId"
              :label="item.TechTypeId + '  ' + item.Name"
              :value="item.TechTypeId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click.native="addDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="submitForm('addForm')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog> -->
  </div>
</template>

<script>
// import {getTechPageList,insertTech,updateTech,removeTech,startOrStopTech,getMethodListByTech,setMethodByTech,getTechTypeList,getTechLog } from "@/api/process"
// import AzureDynamicTable from "@/components/mDynamicTable/AzureDynamicTable";
// import selection from "@/mixins/selection";
import { delay } from "@/utils/autoSearch";
export default {
  name: "ProductDevice",
  // mixins: [selection],
  components: {
    // AzureDynamicTable
    // Table
  },
  data() {
    return {
      search: "", //搜索内容
      value: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      tableData: [],
      // columnDesObjs: [
      //   { key: "id", label: "分销商编号" },
      //   { key: "companyName", label: "厂家名称" },
      //   { key: "contactPerson", label: "联系人" },
      //   { key: "telephone", label: "联系电话" },
      //   {
      //     key: "joinWay",
      //     label: "加盟方式"
      //   },
      //   {
      //     key: "ensureAmount",
      //     label: "保证金"
      //   },
      //   { key: "accountFlow", label: "账号流水" },
      //   { key: "inviteNum", label: "邀请客户数" },
      //   {
      //     key: "status",
      //     label: "分销商状态"
      //   },
      //   {
      //     key: "auditBy",
      //     label: "审核人",
      //     width: 150,
      //     isDefaultShowDynamicColumn: false
      //   },
      //   {
      //     key: "auditTime",
      //     label: "审核时间",
      //     width: 270,
      //     isDefaultShowDynamicColumn: false,
      //     dateFormat: true
      //   }
      // ],

      size: 10,
      currentPage: 1, //页码
      TotalNum: 0, //数据总条数
      size1: 10,
      currentPage1: 1, //页码
      TotalNum1: 0,

      addDialogVisible: false, //新增弹出框
      editDialogVisible: false, //修改弹出框
      dialogTableVisible: false, //设置工序方法弹出框
      dialogLogVisible: false, //工序变更日志弹出框

      addForm: {
        name: "",
        description: "",
        wokerOrder: "",
        needTime: "",
        techTypeId: ""
      },
      editInfo: {
        techID: "",
        name: "",
        description: "",
        wokerOrder: "",
        needTime: "",
        techTypeId: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入工序名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        description: [
          { required: true, message: "请输入工序描述", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        wokerOrder: [
          {
            required: true,
            message: "请输入建议工序的排序,例如：4",
            trigger: "blur"
          },
          {
            validator: (rule, value, callback) => {
              if (value == "" || value == undefined || value == null) {
                callback();
              } else if (!Number(value)) {
                callback(new Error("请输入数字"));
              } else if (value < 1 || value > 100) {
                callback(new Error("请输入[1,100]之间的数字"));
              } else {
                callback();
              }
            },
            trigger: "change"
          }
        ],
        needTime: [
          { required: true, message: "请输入工序需要的时间", trigger: "blur" }
        ],
        techTypeId: [
          { required: true, message: "请输入工序类型ID", trigger: "blur" }
        ]
      }
    };
  },
  watch: {
    //用来监听页面变量的改变
    //监听搜索，300ms执行一次fetchData方法（去搜索）
    // search() {
    //   delay(() => {
    //     this.fetchData();
    //   }, 300);
    // }
  },
  mounted() {
    // this.init();
  },
  methods: {
    // 新增
    add() {
      this.addForm = {};
      this.addDialogVisible = true;
    },
    handleSelectionChange(val) {
      console.log(val);
      //   this.$emit('changeData',val)
      //   let listId=[]
      //   val.forEach(el => {
      //       listId.push(el.TechId)
      //   });
      //   this.$emit('getId',listId)
      //   let listName=[]
      //   val.forEach(el => {
      //       listName.push(el.Name)
      //   });
      //   this.$emit('getName',listName)
    },
    indexMethod(index) {
      console.log(index);
      //   return index + 1 + (this.$parent.currentPage - 1) * this.$parent.size;
    }
  }
};
</script>

<style lang="scss" scoped>
.sizeBig {
  font-size: 16px;
}
.topBtn {
  height: 60px;
  width: 98%;
  margin: 0 auto;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  .icon-biang {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-bottom: 2px;
    background: url("../../image/biangeng .png") no-repeat;
    vertical-align: middle;
  }
  .icon-setting {
    display: inline-block;
    width: 14px;
    height: 12px;
    margin-bottom: 2px;
    background: url("../../image/shezhi.png") no-repeat;
    vertical-align: middle;
  }
  .icon-close {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 3px 2px 0;
    background: url("../../image/jinyong.png") no-repeat;
    vertical-align: middle;
  }
  .icon-qiy {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin: 0 3px 2px 0;
    background: url("../../image/qiyong.png") no-repeat;
    vertical-align: middle;
  }
}

.flex {
  display: flex;
}

.tablesize {
  // width: 98%;
  // height: 485px;
  margin: 20px auto;
  #out-table {
    border: 1px solid #eeeeee;
  }
}

.block {
  text-align: right;
  margin: 28px 20px 0 0;
}
</style>
